<template>
  <div>
    <a-modal v-model="visible" :footer="null" :closable="false" :width="'100%'" :wrapClassName="'full-screen-modal'">
      <div class="role-selection">
        <div v-for="role in roles" :key="role.roleCode" class="role-option" @click="selectRole(role.roleCode)">
          <img
            v-if="role.roleCode === 'SUBJECT'"
            src="@assets/微信图片_20240919150742.png"
            :alt="role.roleCode"
            class="role-image"
          />
          <img
            v-if="role.roleCode === 'AGENCY'"
            src="@assets/微信图片_20240919150749.png"
            :alt="role.roleCode"
            class="role-image"
          />
          <h2>{{ role.roleCode === 'SUBJECT' ? '供应商/投标人/受让方' : '代理机构' }}</h2>
          <!-- <p>{{ getRoleDescription(role.roleCode) }}</p> -->
        </div>
      </div>
    </a-modal>

    <a-modal v-model="areaVisible" title="选择区域" @ok="handleAreaOk" @cancel="handleAreaCancel" :width="820">
      <div class="area-selection">
        <a-row :gutter="[16, 16]" type="flex" justify="center">
          <a-col :span="8" v-for="area in areas" :key="area.value">
            <a-card hoverable @click="selectArea(area.value)" :class="{ 'selected-area': selectedArea === area.value }">
              <!-- <img :src="getAreaImage(area.value)" :alt="area.label" class="area-image" /> -->
              <a-card-meta :title="area.label"></a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { mapActions } from 'vuex'
import Vue from 'vue'
import SUBJECT from '@assets/微信图片_20240919150742.png'
import AGENCY from '@assets/微信图片_20240919150749.png'
export default {
  data() {
    return {
      visible: false,
      areaVisible: false,
      roles: [],
      selectedRole: null,
      areas: [],
      result: null,
      selectedArea: null,
    }
  },
  methods: {
    ...mapActions(['refreshToken']),
    show(params) {
      let result = params.result
      console.log(params)
      this.result = result
      if (result?.roleList?.length > 1) {
        this.roles = result.roleList
        this.visible = true
      } else if (result?.roleList?.length == 1 && result?.roleList[0].roleCode == 'AGENCY') {
        this.selectRole(result?.roleList[0].roleCode)
      } else {
        Vue.ls.set('User-Type', '', 7 * 24 * 60 * 60 * 1000)
        this.emitResult()
      }
    },
    selectRole(roleCode) {
      this.selectedRole = roleCode
      Vue.ls.set('User-Type', roleCode, 7 * 24 * 60 * 60 * 1000)
      if (roleCode === 'AGENCY' && this.result.userInfo.isAgencyRegister === 2) {
        this.fetchAreas()
      } else {
        this.refreshToken({ username: this.result.userInfo.username, userType: roleCode }).then(() => {
          this.emitResult()
        })
      }
      this.visible = false
    },
    async fetchAreas() {
      this.$http.get('/register/common/getDictItems/' + 'sys_platform_code').then(v => {
        this.areas = v.result
          .map(item => {
            return {
              ...item,
              value: item.value,
              label: item.text,
            }
          })
          .filter(item => {
            return this.result.userInfo.platformArry?.split(',').includes(item.value)
          })
        this.areaVisible = true
      })
    },
    selectArea(areaValue) {
      this.selectedArea = areaValue
    },
    handleAreaOk() {
      if (this.selectedArea) {
        this.refreshToken({
          username: this.result.userInfo.username,
          userType: this.selectedRole,
          platformCode: this.selectedArea,
        }).then(() => {
          Vue.ls.set('platformArry', this.selectedArea, 7 * 24 * 60 * 60 * 1000)
          this.emitResult()
          this.areaVisible = false
        })
      } else {
        message.warning('请选择一个区域')
      }
    },
    handleAreaCancel() {
      this.areaVisible = false
    },
    emitResult() {
      this.$emit('success', this.result, this.selectedRole)
      // message.success(`已选择：角色 ${this.selectedRole}${this.selectedArea ? `，区域 ${this.selectedArea}` : ''}`)
    },
    getRoleImage(roleCode) {
      // Replace with actual image URLs for each role
      return roleCode === 'SUBJECT' ? SUBJECT : AGENCY
    },
    getRoleDescription(roleCode) {
      // Replace with actual descriptions for each role
      return `Description for ${roleCode}`
    },
    getAreaImage(areaValue) {
      // Replace with actual image URLs for each area
      return `/images/area-${areaValue}.jpg`
    },
  },
}
</script>

<style scoped>
.full-screen-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-selection {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70vh;
}

.role-option {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.role-option:hover {
  transform: scale(1.05);
}

.role-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

.area-selection {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}

.area-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.selected-area {
  border: 2px solid #1890ff;
}
</style>
